<template>
  <div class="pull-up">
    <TitleWrapper :titleArr="titleArr2" @titleClick="handleTitleClick"></TitleWrapper>
    <!-- 弹出框封装组件 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="titleArr2[0].children" />
      <van-dropdown-item v-model="value2" :options="titleArr2[1].children" />
      <van-dropdown-item v-model="value3" :options="titleArr2[2].children" />
      <van-dropdown-item v-model="value4" :options="titleArr2[3].children" />
    </van-dropdown-menu>
    <MyPopup
      @closePopup="closePopup"
      :showPopup="showPopup"
      :titleNumber="titleNumber"
      :smartIndex="smartIndex"
      :carStatus="carStatus"
      :titleArr="titleArr2"
      @smartClick="handleSmartClick"
      @statusClick="handleCartStatusClick"
    ></MyPopup>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <CarListItem :list="list"></CarListItem>
    </van-list>
  </div>
</template>

<script>
import CarListItem from '@/components/CarListItem.vue'
import TitleWrapper from '@/components/TitleWrapper.vue'
import MyPopup from './components/pop-up.vue'
import { mapState } from 'vuex'
export default {
  components: { CarListItem, TitleWrapper, MyPopup },
  data() {
    return {
      value1: 'id',
      value2: 'id',
      value3: 'id',
      list: [],
      loading: false,
      finished: false,
      opt: { page: 1, size: 10 },
      showPopup: false,
      titleNumber: 0,
      smartIndex: 0,
      carStatus: {
        carAge: 0,
        mileage: 0,
      },
    }
  },
  created() {
    this.getData()
  },
  computed: {
    ...mapState(['titleArr', 'titleArr2']),
  },
  methods: {
    closePopup() {
      console.log('关闭')
      this.showPopup = false
    },
    handleTitleClick(index) {
      console.log('index:', index)
      this.showPopup = true
    },
    async getData() {
      const data = await this.$http.get('/api/car', { params: this.opt })
      this.list = [...this.list, ...data.data.list]
    },
    handleSmartClick() {},
    handleCartStatusClick() {},
    // 异步更新数据
    onLoad() {
      console.log('我到底部了')
      // 改变page状态 实现数据累加
      this.opt.page++
      if (this.opt.page >= 11) {
        this.loading = false
        return
      }
      setTimeout(() => {
        this.getData().then((res) => {
          // 加载状态结束
          this.loading = false
        })
      }, 500)
    },
  },
}
</script>

<style>
.pull-up {
  position: relative;
}
</style>
